<template>
	<div>
		<jk-search-select
			:show-add="true"
			:placeholder="placeholder"
			:only-key="onlyKey"
			:query-name="queryName"
			:readonly="readonly"
			:disabled="disabled"
			class="width-100-percent"
			:size="size"
			:params-data="ruleForm"
			:query-search-async="querySearchAsync"
			@on-select="handleSelect"
			@on-click-icon="onSelectProductIcon"
			@on-add-icon="onAddIcon"
		></jk-search-select>

		<select-product-dialog
			:form-data="ruleForm"
			:default-category="defaultCategory"
			:default-stock-type="defaultStockType"
			:dialog-state="selectProductDialogState"
			@on-confirm="onConfirmBtnOfSelectProductDialog"
			@on-visible-change="onVisibleChangeOfSelectProductDialog"
		></select-product-dialog>

		<create-dialog
			:dialog-state="createDialogState"
			@on-visible-change="onVisibleChangeOfCreateDialog"
			@on-finish="onFinishOfCreateDialog"
		></create-dialog>
	</div>
</template>
<script>
    import selectProductDialog from './radio-select-product-dialog';
    import { spinProductGet, spinProductPage } from '../../../../../api/material/material';
    import { pageConfig } from '../../../../../utils/jk/jk-tool';
    import { spinCustomerGet } from '../../../../../api/personnel/customer';
    import createDialog from '../../../../material/base/save-dialog';

    export default {
        components: { selectProductDialog, createDialog },
        props: {
            formData: {
                type: Object,
                default() {
                    return {};
                }
            },
            onlyKey: { // 外部与optionKey关联绑定的字段名
                type: String,
                default: 'productId'
            },
            queryName: { // 搜索的字段
                type: String,
                default: 'productName'
            },
            placeholder: {
                type: String,
                default: '物料'
            },
            disabled: {
                type: Boolean,
                default: false
            },
            readonly: {
                type: Boolean,
                default: false
            },
            defaultCategory: { // 默认的物料分类
                type: String,
                default: ''
            },
            defaultStockType: { // 默认的存货类型
                type: String,
                default: ''
            },
            size: {
                type: String,
                default: 'medium'
            }
        },
        data() {
            return {
                createDialogState: false,
                selectProductDialogState: false,
                ruleForm: {}
            };
        },
        methods: {
            returnData(item) {
                this.$emit('on-select', item);
            },
            getDetailRequest(id) {
                spinProductGet({ id }).then(res => {
                    if (res.data.status === 200) {
                        this.returnData(res.data.res);
                    }
                });
            },
            onVisibleChangeOfCreateDialog(e) {
                this.createDialogState = e;
            },
            onFinishOfCreateDialog(id) {
                this.getDetailRequest(id);
                this.createDialogState = false;
            },
            onAddIcon() {
                this.createDialogState = true;
            },
            querySearchAsync(queryString) {
                return spinProductPage({
                    nameOrCode: queryString,
                    pageNo: 1,
                    auditState: 1,
                    dictCategoryCode: 'STOCK_TYPE',
                    // workshopId: this.formData.workshopId,
                    // typeNameOrCode: this.defaultStockType,
                    pageSize: pageConfig.remotePageSize
                }).then(res => {
                    if (res.data.status === 200) {
                        return res.data.res.map(x => {
                            return {
                                value: x.name,
                                ...x
                            };
                        });
                    }
                });
            },
            handleSelect(item) {
                this.$emit('on-select', item);
            },
            onVisibleChangeOfSelectProductDialog(e) {
                this.selectProductDialogState = e;
            },
            onConfirmBtnOfSelectProductDialog(e) {
                if (Object.keys(e).length) {
                    this.$emit('on-select', e);
                    this.selectProductDialogState = false;
                }
            },
            onSelectProductIcon() {
                this.selectProductDialogState = true;
            }
        },
        watch: {
            formData: {
                handler(newVal) {
                    this.ruleForm = JSON.parse(JSON.stringify(newVal));
                },
                deep: true,
                immediate: true
            }
        }
    };
</script>
